<template>
  <div class="afterInvestDel-page">
    <pubChunk>
      <div slot="title">
        <div class="title">
          {{ compositionName }}
          <el-tooltip
            v-if="info.mark"
            popper-class="tit-tip"
            :open-delay="500"
            :content="info.mark"
            placement="right"
          >
            <i class="el-icon-document fontdoc" style="font-size: 16px"></i>
          </el-tooltip>
        </div>
        <el-button
          type="small"
          @click="weekMonDialogVisible = true"
          style="vertical-align: text-bottom"
        >
          周/月报告
        </el-button>
      </div>
      <div slot="headLeft" style="width: 314px">
        <el-button size="small" type="primary" @click="goContrast">
          <i class="iconfont icon-jia"></i>
          去对比
        </el-button>
        <el-button size="small" type="primary" @click="goConfigPage">
          <svg-icon icon-class="caidan" style="margin-right: 6px" />
          配置组合
        </el-button>
        <el-button size="small" @click="refreshPage">
          <i class="iconfont icon-shuaxin"></i>
          刷新
        </el-button>
      </div>

      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">
                      {{ info.netWorthEndTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">
                      截止至{{ info.netWorthEndTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[0].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[0].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[0].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else class="fzBig">/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div
                    class="label label-line2"
                    style="width: 138.69px; text-align: right"
                  >
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">
                      成立日期：{{ info.netWorthTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[7].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[7].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[7].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else class="fzBig">/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    累计净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近3月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[2].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[2].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[2].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    年化收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="info.riskIndicatorsBean"
                      :class="
                        info.riskIndicatorsBean.annualizedIncomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.riskIndicatorsBean.annualizedIncomeRate | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    复权净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近6月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[3].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[3].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[3].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    夏普比率：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">
                      {{ info.riskIndicatorsBean.sharpeRate | toFixed2 }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近1年收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[4].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[4].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[4].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    最大回撤：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">
                      {{ info.riskIndicatorsBean.maximumDrawdownRate }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label label-line2">
                <p>投资金额：</p>
                <p class="fs12 tip tof">单位：万元</p>
              </div>
              <div class="fromLine-content fzBig">{{ info.initMoney }}</div>
            </div>
            <div class="fromLine" style="margin-top: 15px">
              <div class="label">创建日期：</div>
              <div class="fromLine-content fw">
                {{ info.netWorthTime | parseTime }}
              </div>
            </div>
            <div class="fromLine">
              <div class="label">复利周期：</div>
              <div class="fromLine-content fw">
                {{ warehouseAdjustmentCycleCom }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </pubChunk>
    <allStrategyOpen
      v-if="allStrategyVisible"
      title="添加实盘"
      type="radio"
      ref="allStrategy"
      :userId="userId"
      :disabled="[`${'Z' + id}`]"
      :noDblclick="true"
      @selctInvestName="selctInvestNameHandle"
    ></allStrategyOpen>
    <profitLossDialog
      :profitLossDialogVisible.sync="weekMonDialogVisible"
      :compositionId="params.compositionId"
      :netWorthEndTime="info.netWorthEndTime"
      :startTime="info.netWorthTime"
      :endTime="info.netWorthEndTime"
      :realquery="realquery"
    ></profitLossDialog>
    <!-- <week-mon-dialog
      :id="id"
      :netWorthEndTime="info.netWorthEndTime | parseTime"
      :weekMonDialogVisible.sync="weekMonDialogVisible"
    ></week-mon-dialog> -->
  </div>
</template>
<script>
import { getHeadDetail } from "@/api/combManage";
import { parseTime, deepClone } from "@/utils";
import { randomNum } from "@/utils/pro";
import allStrategyOpen from "@/views/other/allStrategyOpen.vue";
import profitLossDialog from "./profitLossDialogRate.vue";
// import weekMonDialog from "./weekMonDialog.vue";
import pubChunk from "@/components/investComn/pubChunk.vue";
export default {
  components: {
    pubChunk,
    profitLossDialog,
    // weekMonDialog,
    allStrategyOpen,
  },
  data() {
    return {
      listLoading1: false,
      params: {
        compositionId: "",
      },
      weekMonDialogVisible: false,
      combTreeStrategyName: "",
      allStrategyVisible: false,
      warehouseAdjustmentCycle: 1,
      dates: [],
    };
  },
  props: {
    id: {
      type: String | Number,
    },
    userId: {
      type: String | Number,
    },
    oldDate: {
      type: Object | Array,
    },
    info: {
      type: Object | Array,
    },
    more_chart1_nav_list2: {
      type: Object | Array,
    },
    realquery: {
      type: Object | Array,
    },
    startTime: {
      type: String | Number,
    },
    endTime: {
      type: String | Number,
    },
  },
  created() {
    const zid = this.$route.params && this.$route.params.id; // 多开标签
    this.$emit("update:id", zid);
    this.params.compositionId = zid;
    this.getHeadDetailHandle();
  },
  computed: {
    compositionName: function () {
      if (this.info.compositionName && this.info.compositionName.length > 50) {
        return this.info.compositionName.slice(0, 50) + "...";
      } else {
        return this.info.compositionName;
      }
    },
    warehouseAdjustmentCycleCom() {
      const list = ["不复利", "按日", "按月", "按季", "按年"];
      return list[this.warehouseAdjustmentCycle - 1];
    },
  },
  mounted() {},
  methods: {
    realContrast() {
      this.allStrategyVisible = true;
      this.$nextTick(() => {
        this.$refs.allStrategy.init();
      });
    },
    selctInvestNameHandle(row) {
      this.$emit("update:realquery", row);
    },
    goContrast() {
      const res_list = [
        {
          id: this.id,
          name: this.info.compositionName,
          type: 3,
        },
      ];
      const id = randomNum(6);
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1,
        },
      });
    },
    goConfigPage() {
      this.$router.push({
        path: "/strategyComb/combManage/config",
        query: {
          compositionId: this.id,
        },
      });
    },
    refreshPage() {
      const view = this.$route;
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        const { fullPath } = view;
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      });
    },
    getHeadDetailHandle() {
      this.listLoading1 = true;
      getHeadDetail({
        ...this.params,
      }).then((res) => {
        this.listLoading1 = false;
        // 多开标签 设置
        this.tempRoute = Object.assign({}, this.$route);
        this.$setTagsViewTitle(
          this.tempRoute,
          `净值分析[策略组合]-${res.body.compositionName}`
        );
        document.title = `净值分析[策略组合]-${res.body.compositionName}`;
        this.$emit("update:info", res.body);
        // console.log("组合详情", res.body);

        if (res.body.childrenId) {
          const realquery = {
            childrenId: res.body.childrenId,
            childrenName: res.body.childrenName,
            childrenType: res.body.childrenType,
          };
          this.$emit("update:realquery", realquery);
        }

        this.combTreeStrategyName = this.info.compositionName;
        this.warehouseAdjustmentCycle = res.body.warehouseAdjustmentCycle;
        this.$emit(
          "update:warehouseAdjustmentCycle",
          res.body.warehouseAdjustmentCycle
        );

        const dates = [];
        dates[0] = parseTime(res.body.classifyNetWorthBean.startDate);
        dates[1] = res.body.classifyNetWorthBean.endDate
          ? parseTime(res.body.classifyNetWorthBean.endDate)
          : parseTime(new Date());
        this.$emit("update:startTime", dates[0]);
        this.$emit("update:endTime", dates[1]);
        this.$emit("update:oldDate", deepClone(dates));

        let year0 = Number(dates[0].slice(0, 4));
        const year1 = Number(dates[1].slice(0, 4));
        const yearList = [];
        while (year0 <= year1) {
          yearList.push(year0 + "年度");
          year0++;
        }
        this.$emit("update:more_chart1_nav_list2", yearList);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
    display: inline-block;
    margin-right: 10px;
  }
  .icon-jia {
    font-size: 12px;
    margin-right: 6px;
  }
  .icon-shuaxin {
    font-size: 14px;
    margin-right: 6px;
  }
}
</style>
